<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>制作导航栏</title>
		<style>
		/*使用float浮动让列表横向展示*/
			/* 导航栏*/
			
			.nav {
				width: 800px;
				height: 60px;
				background-color: pink;
				margin: 20px auto;
				/*background-image: url(img/QQ20170712-0.jpg);*/
				background-color: #6495ED;
			}
			/*去掉ul列表的样式变成纯文字*/
			
			ul li {
				list-style: none;
			}
			/*横向，去下划线，字体居中，字体间距离*/
			
			.nav ul li a {
				/*使用费浮动，让列表中中文字变为横向显示*/
				float: left;
				/*使用线高让字体（上下）居中，由于整体高度为60px*/
				line-height: 60px;
				/*让文字之间产生距离*/
				padding: 0 40px;
				/*文字大小*/
				font-size: 20px;
				/*去a标签下划线*/
				text-decoration: none;
			}
			/*通过伪类设置悬停效果*/
			
			.nav ul li a:hover {
				color: white;
				font-size: 30px;
				background-color: red;
			}
			.main{
				width: 800px;
				height: 400px;
				margin: 0 auto;	
				overflow: hidden;
			}
			.page1,.page2,.page3{
				width: 800px;
				height: 400px;
			}
			.page1{
				background-color: royalblue;
			}
			.page2{
				background-color: darkgreen;
			}
			.page3{
				background-color: darkgoldenrod;
			}
		</style>
	</head>

	<body>
		<div class="nav">
			<ul>
				<li><a href="#page1">首页</a></li>
				<li><a href="#page2">体育</a></li>
				<li><a href="#page3">娱乐</a></li>
			</ul>
		</div>
		<!--Tab切换-->
		<div class="main">
			<div class="page1" id="page1"></div>
			<div class="page2" id="page2"></div>
			<div class="page3" id="page3"></div>
		</div>
	</body>

</html>